<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的消息</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; width: 100%; position: fixed; top: 0; left: 0; z-index: 99">
    <header class="header header-shadow">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>我的消息</h2>
        <!-- <div class="header-right">
            <div class="nav-right c-999"><img style="width: .3rem" src="../../icon/icon-clear2.png" /></div>
        </div> -->
    </header>
</div>

<div class="mescroll" id="mescroll" style="padding-top: 1.5rem">
    <section class="html_section">
        <ul class="msg_list">
            <!-- <li onscroll="scorllMsg(this)" >
                <div class="msg_box">
                    <div class="msg_radio"></div>
                    <div class="msg_content">
                        <div class="msg_title_img"><img src="../../icon/msg_logo.png" /></div>
                        <div class="msg_detail">
                            <div class="between line_center">
                                <span class="f30 b">通知</span>
                                <span class="f22 c-999">10:44</span>
                            </div>
                            <div class="f26 c-999 mt5 single-ellipsis">暂时没有消息</div>
                        </div>
                    </div>
                     <div class="msg_delete">删除</div>
                </div>
            </li> -->
            <li id="inter" onclick="commonUrl('../member/msg_tz')">
                <div class="msg_box">
                    <div class="msg_content">
                        <div class="msg_title_img"><img src="../../icon/tz.png"/></div>
                        <div class="msg_detail">
                            <div class="between line_center pt5">
                                <span class="f30 b">通知</span>
                                <span class="f22 c-999 time"></span>
                            </div>
                            <div class="f26 c-999 mt5  line_center between msg_text"><span
                                    class="single-ellipsis"></span><div style="display: none;" class="msg_count" id="msg1"></div></div>
                        </div>
                    </div>
                </div>
            </li>
            <li id="system" onclick="commonUrl('../member/msg_system')">
                <div class="msg_box">
                    <!-- <div class="msg_radio"></div> -->
                    <div class="msg_content">
                        <div class="msg_title_img"><img src="../../icon/xt.png"/></div>
                        <div class="msg_detail">
                            <div class="between line_center pt5">
                                <span class="f30 b">系统消息</span>
                                <span class="f22 c-999 time"></span>
                            </div>
                            <div class="f26 c-999 mt5  line_center between msg_text"><span
                                    class="single-ellipsis"></span><div style="display: none;" class="msg_count" id="msg2"></div></div>
                        </div>
                    </div>
                    <!-- <div class="msg_delete">删除</div> -->
                </div>
            </li>
        </ul>
    </section>
</div>

<section class="bj_footer">
    <div class="all_radio">全选</div>
    <div><span class="c-primary mr30">删除</span><span class="c-primary">清空</span></div>
</section>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css"/>
<script type="text/javascript" src="../../script/mescroll.min.js"></script>
<script type="text/javascript">
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        keybackListener()
        pop.loading()
        //监听城市
        api.addEventListener({
            name: 'reload'
        }, function (ret, err) {
            ready();
        })
        //监听通知消息
        api.addEventListener({
            name: 'tzInfo'
        }, function (ret, err) {
            ready();
        })
        //监听系统消息
        api.addEventListener({
            name: 'xtInfo'
        }, function (ret, err) {
            ready();
        })


        ready();
    }

    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        }
    });
    /*下拉刷新的回调 */
    function downCallback() {
        ready()

        //mescroll.endErr();
    }

    function ready() {
        getAjax(Interface.get_notice, {token: $api.getStorage('token')}, function (res) {
            pop.close();
            var system = res.data.system;
            var inter = res.data.inter;
            if (system) {
                if (system.title == "") {
                    $("#system .msg_count").remove();
                    $("#system .msg_text span").html('暂时没有新消息');
                    $("#system .time").html('');
                } else {
                    if(system.count == 0){
                        $("#msg2").hide();
                    }else {
                        $("#msg2").show().html(system.count);
                    }
                    $("#system .msg_text span").html(system.title);
                    $("#system .time").html(system.date);
                }
            }else {
                $("#system .msg_count").remove();
                $("#system .msg_text span").html('暂时没有新消息');
                $("#system .time").html('');
            }
            if (inter) {
                if (inter.title == "") {
                    $("#inter .msg_count").remove();
                    $("#inter .msg_text span").html('暂时没有新消息');
                    $("#inter .time").html('');
                } else {
                    if(inter.count == 0){
                        $("#msg1").hide();
                    }else {
                        $("#msg1").show().html(inter.count);
                    }
                    if(inter.leixing  == 1 || inter.leixing  == 2 || inter.leixing  == 3){
                        $("#inter .msg_text span").html('有人'+inter.title);
                    }else {
                        $("#inter .msg_text span").html(inter.title);
                    }
                    $("#inter .time").html(inter.date);
                }
            }else {
                $("#inter .msg_count").remove();
                $("#inter .msg_text span").html('暂时没有新消息');
                $("#inter .time").html('');
            }
            api.sendEvent({
                name: 'msgStatus',
                extra: {}
            });
            mescroll.endErr()
        }, function (res, err) {
            mescroll.endErr()
        })
    }

    function scorllMsg(e) {
        if ($(e).data('scrollTimeout')) {
            clearTimeout($(e).data('scrollTimeout'));
        }
        $(e).data('scrollTimeout', setTimeout(function () {
            var left = $(e).scrollLeft();
            var prve = $(e).attr('scrollLeft');
            var prve = $(e).attr('scrollLeft');
            if (left < prve) {
                $(e).animate({scrollLeft: 0}, 300);
                $(e).attr('scrollLeft', 0);
                return;
            }
            if (left < 10) {
                $(e).animate({scrollLeft: 0}, 300);
            } else {
                $(e).animate({scrollLeft: 1000}, 300);
            }
            $(e).attr('scrollLeft', $(e).scrollLeft());
        }, 100));
    }

    $(".nav-right").click(function () {
        // if($(this).hasClass("on")){
        //     $(".msg_list li").removeClass("bj");
        //     $(".bj_footer").removeClass("bj");
        //     $(this).removeClass("on");
        // }else{
        //     $(".msg_list li").addClass("bj");
        //     $(".bj_footer").addClass("bj");
        //     $(this).addClass("on");
        //     $('.msg_list li').animate({scrollLeft:0},300);
        //     $('.msg_list li').attr('scrollLeft',0);
        // }
        confirmBox('清空消息通知', '您确认要清空吗', function () {
            pop.loading();
            getAjax(Interface.browse_del, {token: $api.getStorage('token')}, function (res) {
                pop.close();
                $(".collection-list ul").empty();
                $(".nodata").show();
            }, function (res, err) {
            })
        })
    })

    $(".bj_footer").click(function () {

    })


</script>
